<!--
 * @Author: your name
 * @Date: 2021-04-01 21:00:58
 * @LastEditTime: 2021-05-26 14:19:14
 * @LastEditors: Please set LastEditors
 * @Description: 临床试验banner
 * @FilePath: /medicine-web/src/views/clinical/components/clinicalBanner.vue
-->
<template>
  <div class="complex-banner-container">
    <div class="main-banner"></div>
    <div class="main-banner__search" v-if="routerList.indexOf($route.path) == -1">
      <div class="main-banner__content">
        <a-row style="margin-bottom: 13px;">
          <a-col :span="24">
            <ul class="tumor-types-pattern">
              <li class="font-pattern-4" >搜索范围：</li>
              <div class="tumor-types-pattern" style="flex-wrap: wrap">
                <li v-for="item in selection" :key="item.name">
                  <customTag style="margin-right: 12px; margin-top: 12px;" v-if="item.children.length > 0" :contentType="item.name" :contentStr="`${item.name}：${formatTumor(item.children)}`" @close="handleClose"></customTag>
                </li>
              </div>
            </ul>
          </a-col>
        </a-row>
        <a-row type="flex" align="middle" justify="space-between">
          <a-col :span="11">
            <a-input v-model="ruleForm.keywords" placeholder="请输入您想搜索的内容" style="height: 43px; font-size: 13px;" />
          </a-col>
          <a-col :span="5">
            <a-row>
              <a-col :span="10">
                <customInputSelect v-model="ruleForm.time_min" :optionsSelection="optionsSelectionList" :placeholderStr="'起始年'"></customInputSelect>
              </a-col>
              <a-col :span="4">
                <span style="width: 100%; height: 43px; display: inline-block; line-height: 43px; text-align: center;">~</span>
              </a-col>
              <a-col :span="10">
                <customInputSelect v-model="ruleForm.time_max" :optionsSelection="optionsSelectionList" :placeholderStr="'结束年'"></customInputSelect>
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="3" class="main-banner__content-center">
            <a-checkbox-group @change="onChange">
              <a-row>
                <a-col :span="24">
                  <a-checkbox value="安柯瑞">
                    <span class="main-banner__text">安柯瑞</span>
                  </a-checkbox>
                </a-col>
                <a-col :span="24">
                  <a-checkbox value="里程碑">
                    <span class="main-banner__text">里程碑</span>
                  </a-checkbox>
                </a-col>
              </a-row>
            </a-checkbox-group>
          </a-col>
          <a-col :span="4">
            <a-button class="btn-pattern" style="height: 39px; width: 100%" @click.stop="search">
              <img :src="require('@/assets/image/search1.png')" alt="" srcset="" style="width: 23px; height: 23px; margin-right: 14px">
              搜 索
            </a-button>
          </a-col>
        </a-row>
        <a-row style="margin-top: 14px;">
          <a-col :span="24">
            <ul class="tumor-types-pattern">
              <li class="font-pattern-4">肿瘤类型：</li>
              <li @click.stop="handleSelection(item, '肿瘤类型')" v-for="item in tumorType" :key="item.id" :class="{ 'font-pattern-4': true, 'font-pattern-4__active': item.isSelected, 'font-pattern-4__deactive': !item.isSelected }" style="margin-left: 16px; cursor: pointer;">{{item.name}}</li>
            </ul>
          </a-col>
        </a-row>
        <a-row style="margin-top: 9px;">
          <a-col :span="24">
            <ul class="tumor-types-pattern">
              <li class="font-pattern-4">溶瘤病毒类型：</li>
              <li @click.stop="handleSelection(item, '溶瘤病毒类型')" v-for="item in oncolyticVirusType" :key="item.id" :class="{ 'font-pattern-4': true, 'font-pattern-4__active': item.isSelected, 'font-pattern-4__deactive': !item.isSelected }" style="margin-left: 16px; cursor: pointer;">{{item.name}}</li>
            </ul>
          </a-col>
        </a-row>
        <a-row style="margin-top: 8px;">
          <a-col :span="24">
            <ul class="tumor-types-pattern">
              <li class="font-pattern-4">研究结果：</li>
              <li>
                <a-checkbox-group @change="onChangeResult" v-model="checkedList">
                  <a-checkbox value="有">
                    <span class="font-pattern-4">有</span>
                  </a-checkbox>
                  <a-checkbox value="无">
                    <span class="font-pattern-4">无</span>
                  </a-checkbox>
                </a-checkbox-group>
              </li>
            </ul>
          </a-col>
        </a-row>
        <a-row style="margin-top: 21px;">
          <a-col :span="24">
            <ul class="tumor-types-pattern__top">
              <li class="font-pattern-4">高级选项：</li>
              <seniorOptions :seniorOptionsList="optionsList" @hasSelected="hasSelection"></seniorOptions>
            </ul>
          </a-col>
        </a-row>
      </div>
    </div>
    <div class="nav-to-statistics" v-if="routerList.indexOf($route.path) == -1">
      <customBtn :btnStr="'数据统计'" @handClick="handleStatistics"></customBtn>
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
import customSelect from '@/components/CustomSelect/index.vue'
import customInput from '@/components/CustomInput/index.vue'
import seniorOptions from '@/components/SeniorOptions/index.vue'
import customTag from '@/components/CustomTag/index.vue'
import customBtn from '@/components/CustomBtn/index'
import customInputSelect from '@/components/CustomInputSelect/index'
import { arrayToSplitStr, splitStrToArray, formatTree, yearPeriod } from '@/utils/index'
import { mapGetters } from 'vuex'
export default {
  name: 'clinicalBanner',
  components: { customSelect, customInput, seniorOptions, customTag, customBtn, customInputSelect },
  data () {
    return {
      optionsSelectionList: yearPeriod(),
      optionsSelectionListMin: yearPeriod(), // 年份选择
      optionsSelectionListMax: [],
      routerList: ['/clinical/detail', '/clinical/statistics'], // 在此路由中的名单， 都不会出现筛选界面
      ruleForm: {
        keywords: '', // 关键字
        time_min: null,
        time_max: null
      },
      // 肿瘤类型
      tumorType: [],
      // 溶瘤病毒类型
      oncolyticVirusType: [],
      // 搜索范围
      selection: [
        { name: '肿瘤类型', children: [] },
        { name: '溶瘤病毒类型', children: [] }
      ],
      optionsList: [ // 高级选项 可选
        {
          name: '招募状态',
          isSelected: true,
          children: []
        },
        {
          name: '临床阶段',
          isSelected: true,
          children: []
        },
        {
          name: '联合疗法',
          isSelected: true,
          children: []
        },
        {
          name: '给药方式',
          isSelected: true,
          children: []
        },
      ],
      // checkList
      checkedList: []
    }
  },
  methods: {
    handleStatistics () {
      // this.$message.success('正在开发中...', 2)
      this.$router.push('/clinical/statistics')
    },
    hasSelection (obj) {
      let flag = false // 如果为false， 那么selection中没有，需要push进去
      for (const item of this.selection) {
        if (item.name === obj.name) {
          flag = true
          if (obj.isSelected) {
            item.children.push({ name: obj.value })
          } else {
            item.children = item.children.filter(item => item.name != obj.value)
          }
          break
        }
      }
      if (!flag) {
        this.selection.push({
          name: obj.name,
          children: [{ name: obj.value }]
        })
      }
      for (const item of this.selection) {
        switch (item.name) {
          case '招募状态':
            this.ruleForm.recruit = arrayToSplitStr(item.children, 'name')
            break;
          case '临床阶段':
            this.ruleForm.stage = arrayToSplitStr(item.children, 'name')
            break;
          case '联合疗法':
            this.ruleForm.cure_method = arrayToSplitStr(item.children, 'name')
            break;
          case '给药方式':
            this.ruleForm.inject_mode = arrayToSplitStr(item.children, 'name')
            break;
          default:
            break;
        }
      }
    },
    formatTumor (rawArray) {
      let temp = ''
      if (rawArray && rawArray.length > 0) {
        for (const item of rawArray) {
          temp += rawArray.indexOf(item) == rawArray.length - 1 ? item.name + '' :  item.name + '、'
        }
      }
      return temp
    },
    handleMenuClick (e) {
      console.log('handleMenuClick', e)
      this.tabName = e.key
    },
    onChange (checkList) {
      if (checkList.includes('里程碑')) {
        this.ruleForm.is_milepost = 1
      } 
      if (!checkList.includes('里程碑')) {
        this.ruleForm.is_milepost = 0
      }
      if (checkList.includes('安柯瑞')) {
        this.ruleForm.is_oncorine = 1
      }
      if (!checkList.includes('安柯瑞')) {
        this.ruleForm.is_oncorine = 0
      }
    },
    onChangeResult (checkList) {
      console.log('checkList', checkList)
      if (checkList && checkList.length == 1) {
        if (checkList.includes('有')) {
          this.ruleForm.is_result = 1
        }
        if (checkList.includes('无')) {
          this.ruleForm.is_result = 0
        }
      } else if (checkList && checkList.length == 2) {
        if (checkList.includes('有') && checkList[1] == '有') {
          this.ruleForm.is_result = 1
        } 
        if (checkList.includes('无') && checkList[1] == '无') {
          this.ruleForm.is_result = 0
        }
      } else {
        delete this.ruleForm.is_result
      }
      if (this.checkedList.length === 2) { // checkbox 二选一
       this.checkedList = this.checkedList.filter(item => item == checkList[1])
      }
    },
    handleClose (typeStr) {
      console.log('handleClose', typeStr)
      for (let item of this.selection) {
        if (item.name === typeStr) {
          item.children = []
        }
      }
      if (typeStr === '肿瘤类型') {
        for (let item of this.tumorType) {
          item.isSelected = false
        }
        this.ruleForm.tumor_type = arrayToSplitStr(this.selection[0].children, 'name')
      } else if (typeStr === '溶瘤病毒类型') {
        for (let item of this.oncolyticVirusType) {
          item.isSelected = false
        }
        this.ruleForm.virus_type = arrayToSplitStr(this.selection[1].children, 'name')
      } else { // 高级选项
        for (let item of this.optionsList) {
          if (item.name === typeStr) {
            item.children = item.children.map(item => {
              return {
                id: item.id,
                name: item.name,
                isSelected: false,
                children: item.children = item.children.map(o => {
                  return {
                    id: o.id,
                    name: o.name,
                    isSelected: false,
                    children: []
                  }
                })
              }
            })
          }
        }
        // 修改完数据，并将修改后的数据和类型传递给SeniorOptions组件
        this.$action('refreshSeniorOptions', { optionsList: this.optionsList, typeStr })
        switch (typeStr) {
          case '招募状态':
            this.ruleForm.recruit = ''
            break;
          case '临床阶段':
            this.ruleForm.stage = ''
            break;
          case '联合疗法':
            this.ruleForm.cure_method = ''
            break;
          case '给药方式':
            this.ruleForm.inject_mode = ''
            break;
          default:
            break;
        }
      }
    },
    handleSelection (raw, type) {
      if (type === '肿瘤类型') { // 肿瘤类型
        raw.isSelected = !raw.isSelected
        if (raw.isSelected) {
          this.selection[0].children.push({ name: raw.name })
        } else {
          this.selection[0].children = this.selection[0].children.filter(item => item.name != raw.name)
        }
        this.ruleForm.tumor_type = arrayToSplitStr(this.selection[0].children, 'name')
      } else { // 溶瘤病毒类型
        raw.isSelected = !raw.isSelected
        if (raw.isSelected) {
          this.selection[1].children.push({ name: raw.name })
        } else {
          this.selection[1].children = this.selection[1].children.filter(item => item.name != raw.name)
        }
        this.ruleForm.virus_type = arrayToSplitStr(this.selection[1].children, 'name')
      }
    },
    initDict () {
      const dicts = JSON.parse(this.getLocalStorage('dicts'))
      // 肿瘤类型
      this.tumorType = dicts && dicts.tumorType ? dicts.tumorType.subs.map(item => {
        return {
          id: item.id,
          name: item.name,
          isSelected: false
        }
      }) : []
      // 溶瘤病毒
      this.oncolyticVirusType = dicts && dicts.oncolyticVirusType ? dicts.oncolyticVirusType.subs.map(item => {
        return {
          id: item.id,
          name: item.name,
          isSelected: false
        }
      }) : []
      this.optionsList[0].children = dicts && dicts.recruitStatus ? formatTree(dicts.recruitStatus.subs.map(item => {
        return {
          id: item.id,
          name: item.name,
          isSelected: false,
          parentId: item.fid,
          children: []
        }
      })) : []
      this.optionsList[1].children = dicts && dicts.clinicalStage ? formatTree(dicts.clinicalStage.subs.map(item => {
        return {
          id: item.id,
          name: item.name,
          isSelected: false,
          parentId: item.fid,
          children: []
        }
      })) : []
      this.optionsList[2].children = dicts && dicts.therapy ? formatTree(dicts.therapy.subs.map(item => {
        return {
          id: item.id,
          name: item.name,
          isSelected: false,
          parentId: item.fid,
          children: []
        }
      })) : []
      this.optionsList[3].children = dicts && dicts.administrationRoute ? formatTree(dicts.administrationRoute.subs.map(item => {
        return {
          id: item.id,
          name: item.name,
          isSelected: false,
          parentId: item.fid,
          children: []
        }
      })) : []
      this.$forceUpdate()
      console.log('optionsList', this.optionsList)
    },
    search () {
      for (const item in this.ruleForm) {
        if (!this.ruleForm[item] && this.ruleForm[item] != 0) {
          delete this.ruleForm[item]
        }
      }
      console.log('this.ruleForm search', this.ruleForm)
      let params = JSON.parse(JSON.stringify(this.ruleForm))
      params.isInit = false
      this.$action('setFilter', params)
    },
    keyUpFun (event) {
      var event=document.all? window.event : event
  　　 if((event.keyCode || event.which) == 13) {
  　　　 this.search()
  　　 }
    }
  },
  mounted () {
    this.initDict()
    if (this.filterMap && this.filterMap.tumor_type) {
      this.ruleForm.tumor_type = this.filterMap.tumor_type
      const tumor_type = splitStrToArray(this.filterMap.tumor_type)
      for (const item of tumor_type) {
        this.selection[0].children.push({ name: item })
        for (let o of this.tumorType) {
          if (o.name == item) {
            o.isSelected = true
          }
        }
      } 
    }
    if (this.filterMap && this.filterMap.virus_type) {
      this.ruleForm.virus_type = this.filterMap.virus_type
      const virus_type = splitStrToArray(this.filterMap.virus_type)
      for (const item of virus_type) {
        this.selection[1].children.push({ name: item })
        for (let o of this.oncolyticVirusType) {
          if (o.name == item) {
            o.isSelected = true
          }
        }
      }
    }
    if (this.filterMap && this.filterMap.keywords) {
      this.ruleForm.keywords = this.filterMap.keywords
    }
    document.body.addEventListener('keyup', this.keyUpFun, false)
  },
  watch: {
    'ruleForm.keywords': function (val, oldVal) {
      this.$action('setSearchValue', val)
    },
    // 'ruleForm.time_min': function (val, oldVal) {
    //   this.optionsSelectionListMax = yearPeriod(val)
    //   this.$nextTick(() => {
    //     this.ruleForm.time_max = null
    //   })
    // }
  },
  computed: {
    ...mapGetters({
      filterMap: 'filterMap'
    })
  },
  beforeDestroy () {
    this.$action('setFilter', {})
    this.$action('setSearchValue', '')
    document.body.removeEventListener('keyup', this.keyUpFun, false)
  }
}
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/flex.scss';
@import '~@/assets/styles/common.scss';
.main-banner {
  width: 100%;
  height: 337px;
  background-image: url('./../../../assets/image/banner2.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.main-banner__search {
  height: 280px;
  position: relative;
  .main-banner__content {
    position: absolute;
    width: 1200px;
    // height: 256px;
    z-index: 2;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%, 0);
    box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.21);
    background-color: #fff;
    border-radius: 5px;
    padding: 26px 32px;
    @include flex-def;
    @include flex-zTopBottom;
    @include flex-zBetween;
    .main-banner__content-center {
      @include flex-def;
      @include flex-zCenter;
      /deep/ .main-banner__text {
        font-size: 13px;
        color: #555;
        font-weight: 400;
      }
    }
    .btn-pattern {
      width: 100%;
      height: 100%;
      font-size: 13px;
      word-spacing: 10px;
      background-color: #1ADBB6;
      border: none;
      border-radius: 4px;
      color: #fff;
    }
    .tumor-types-pattern {
      @include flex-def;
      @include flex-cCenter;
      padding: 0;
      margin: 0;
    }
    .tumor-types-pattern__top {
      @include flex-def;
      @include flex-cStart;
      padding: 0;
      margin: 0;
    }
  }
}
</style>
